<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
		<style>
			/* 盒子模型4个元素:content内容,padding内边距,border边框,margin外边距 */
			.box{
				width:200px;	/* 宽 */
				height:300px;	/* 高 */
				/* border-width:1px;/* 边框宽度 */ */
				/* border-color:red; */ /* 边框颜色:颜色单词,#6位十六进制数 ，rgb(三个值，每个值0-255)*/
				/* 边框样式border-style:solid实线 dotted点线 dashed虚线 */
				/* border-style:solid; */
				/* 边框复合写法: */
				border:solid 1px rgb(255,255,0);
				border-bottom: 10px dotted red;
				border-top:10px dashed green;
				border-left:5px solid pink;
				border-right: 5px solid gold;
				/* 方位词:top上,bottom下,left左,right右,center中间 */
				/* padding-top:50px;
				padding-left: 30px; */
				/* padding: 10px;四个方位的内边距都是10px */
				/* padding:10px 30px;   第一个值指上下,第二个指左右 */
				/* padding：10px 20px 30px；  第一个上，第二个左右，第三个下 */
				/* padding:10px 20px 30px 40px;  第一个上，第二个右，第三个下，第四个左 (顺时针)*/
			}
		</style>
	</head>
	<body>
		<div class="box">hello box</div>
	</body>
</html>
